<template>
  <div class="banner">
    <el-carousel height="550px">
      <el-carousel-item v-for="item in bannerImgLIst" :key="item.url">
        <div class="banner-image" :style="`backgroundImage:url(${item.url}) ` " />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'Banner',
  data () {
    return {
      bannerImgLIst: [
        { url: 'https://saas-oss.oss-accelerate.aliyuncs.com/upload/20210315151808849.png' },
        { url: 'https://saas-oss.oss-accelerate.aliyuncs.com/upload/20210315152433585.png' },
        { url: 'https://saas-oss.oss-accelerate.aliyuncs.com/upload/20200727112526929.png' },
        { url: 'https://saas-oss.oss-accelerate.aliyuncs.com/upload/20210315152133603.png' },
        { url: 'https://saas-oss.oss-accelerate.aliyuncs.com/upload/20210315152209552.png' }
      ]
    }
  }

}
</script>

<style lang="scss" scoped>
.banner-image{
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto;
}
</style>
